<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Planet Earth</title>
  <style>
    body {
      background: url(espaco.jpg) no-repeat 0 0;
      /* 背景图片被拉伸为全屏 */
      background-size: 100%;
    }

    @keyframes loop {
      0% {
        background-position: 0 0;
      }

      100% {
        /* 世界地图的大小为900*450，所以background-position-x: -900px */
        /* 背景图片的定位：定位值为负，代表向左或上移动的距离。这里设置水平方向为负值，代表向左移动*/
        background-position: -900px 0;
      }
    }

    .earth {
      /* 背景图片在水平方向平铺*/
      background: url(terra.jpg) repeat-x 0 0;
      /*形成圆边效果，视觉效果更好，当然也可以不用*/
      border: 1px solid rgba(26, 18, 101, 0.3);
      /*使地球形成圆形效果*/
      border-radius: 225px;
      /*添加2个阴影，形成圆形外面的模糊月晕效果*/
      box-shadow: -8px 0 25px rgba(256, 256, 256, 0.3),
        -1px -2px 14px rgba(256, 256, 256, 0.5) inset;
      /*下面的属性可实现地球在当前浏览器窗口水平和垂直方向上都居中 */
      height: 450px;
      left: 50%;
      margin: -225px 0 0 -225px;
      position: absolute;
      top: 50%;
      width: 450px;
      /* 这里的时间是可以自定义设置的，如果你想地球转速快一点的话，时间改小点即可，比如10s */
      animation: loop 20s linear infinite;
    }

    .earth:before {
      content: "";
      border-radius: 225px;
      /*设置弧形阴影，形成白天黑夜的效果*/
      box-shadow: -150px -6px 25px rgba(0, 0, 0, 0.7) inset;
      left: 0;
      position: absolute;
      top: 0;
      height: 450px;
      width: 450px;
    }
  </style>
</head>

<body>
  <div class="earth"></div>
</body>

</html>